<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>移动端拖拽</title>
    <style>
      div {
        position: absolute;
        width: 200px;
        height: 200px;
        top: 0;
        left: 0;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div></div>
    <script>
      var div = document.querySelector("div");
      var startX = 0,
        startY = 0; //手坐标
      var x = 0,
        y = 0; //盒子坐标
      div.addEventListener("touchstart", function (e) {
        startX = e.targetTouches[0].clientX;
        startY = e.targetTouches[0].clientY;
        x = this.offsetLeft;
        y = this.offsetTop;
      });
      div.addEventListener("touchmove", function (e) {
        this.style.left = e.targetTouches[0].clientX - startX + x + "px";
        this.style.top = e.targetTouches[0].clientY - startY + y + "px";
      });
    </script>
  </body>
</html>
